<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>侠客影院-电影列表</title>
	<link rel="stylesheet" href="css/style/productList-style.css">
	<link rel="stylesheet" href="css/pubiic/head_and_footer.css">
	<link rel="shortcut icon" href="侠.ico" type="image/x-icon">
	<script src="js/jquery-3.3.1.min.js"></script>
</head>

<body class="black-theme">
	<!-- 头部 -->
	<header id="Top">
		<nav>
			<article class="wrapper">
				<!-- logo -->
				<div class="header-logo flex-col-4">
					<a href="index.html" title="侠客影院">
						<img src="img/Logo.png" title="侠客影院">
					</a>
				</div>
				<!-- 左导航 -->
				<ul class="nav-left flex-col-8">
					<li class="nav-index-btn"><a href="index.html">首页</a></li>
					<li class="nav-current"><a href="productList.html">电影</a></li>
					<li><a href="#">影院</a></li>
					<li><a href="newsList.html">热点</a></li>
					<li><a href="#">榜单</a></li>
					<li class="nav-vip-btn"><a href="#">会员中心</a>
					</li>
					<li class="nav-drop-down-btn" style="padding-right: 0"><i class="iconfont icon-xiala-"></i>
					</li>
				</ul>
				<!-- 占位盒子 -->
				<div class="placeholder"></div>
				<!-- 右内容 -->
				<div class="nav-right flex-col-12">
					<!-- 搜索框 -->
					<div class="search-box">
						<div class="search">
							<div class="icon-search-960" style="display: none"><i class="iconfont icon-sousuo"></i>
							</div>
							<form id="nav-search" class="black-theme__search-focus" action="" method="get">
								<input type="text" name="searchMovie" id="" placeholder="搜索电影">
								<button class="header-search-btn"><i class="iconfont icon-sousuo"></i></button>
							</form>
						</div>
					</div>
					<div class="hide-icon" style="display: none;">
						<div class="btn-category">
							<button class="iconfont icon-sousuo"></button>
							<button class="iconfont icon-fenlei"></button>
						</div>
					</div>
					<!-- 导航项目 -->
					<div class="mobile">
						<a href="#">
							<i class="iconfont icon-shouji"></i>
							<span>手机端</span>
						</a>
					</div>
					<div class="view-history">
						<a href="#">
							<i class="iconfont icon-lishijilu_huaban"></i>
							<span>观影记录</span>
						</a>
					</div>
					<div class="ticket-history">
						<a href="cart.html">
							<i class="iconfont icon-goupiao"></i>
							<span>购票订单</span>
						</a>
					</div>
					<!-- 用户 -->
					<div class="header-usertxt">
						<div class="header-login">
							<a href="login.html">登录</a>
						</div>
						<i class="header-usertxt-icon iconfont icon-xiala">
						</i>
						<div class="header-login_menu" style="display: none;">
							<a href="register.html">注册</a>
							<a href="admin/login.html">管理员</a>
						</div>
					</div>
					<div class="header-user">
						<a href="#" class="header-userImg"
							style="background: url(img/透明头像.png) center center no-repeat;">
							<i class="iconfont icon-weibiaoti1"></i></a>
					</div>
					<div class="header-position">
						<a href="#">
							<i class="iconfont icon-weizhi"></i>
							<span>清远</span>
						</a>
					</div>
				</div>
			</article>
		</nav>
		<!-- 背景颜色模糊 -->
		<div id="header-bg" class="header-bg-blur__black"></div>
	</header>
	<main class="wrapper">
		<div class="searcharea">
			<form action="" method="get">
				<dl>
					<dt>筛选条件：</dt>
					<dd>
						<h5>类型：</h5>
						<ul class="sift-list">
							<li class="cur"><a href="#">全部</a></li>
							<li><a href="#">爱情</a></li>
							<li><a href="#">喜剧</a></li>
							<li><a href="#">动画</a></li>
							<li><a href="#">剧情</a></li>
							<li><a href="#">恐怖</a></li>
							<li><a href="#">惊悚</a></li>
							<li><a href="#">科幻</a></li>
							<li><a href="#">悬疑</a></li>
							<li><a href="#">犯罪</a></li>
							<li><a href="#">冒险</a></li>
							<li><a href="#">战争</a></li>
							<li><a href="#">奇幻</a></li>
							<li><a href="#">运动</a></li>
							<li><a href="#">家庭</a></li>
							<li><a href="#">武侠</a></li>
							<li><a href="#">历史</a></li>
							<li><a href="#">灾难</a></li>
							<li><a href="#">其他</a></li>
						</ul>
					</dd>
					<dd>
						<h5>区域：</h5>
						<ul class="sift-list">
							<li class="cur"><a href="#">全部</a></li>
							<li><a href="#">大陆</a></li>
							<li><a href="#">美国</a></li>
							<li><a href="#">韩国</a></li>
							<li><a href="#">日本</a></li>
							<li><a href="#">中国香港</a></li>
							<li><a href="#">泰国</a></li>
							<li><a href="#">印度</a></li>
							<li><a href="#">法国</a></li>
							<li><a href="#">英国</a></li>
							<li><a href="#">俄罗斯</a></li>
							<li><a href="#">意大利</a></li>
							<li><a href="#">德国</a></li>
							<li><a href="#">澳大利亚</a></li>
							<li><a href="#">其他</a></li>
						</ul>
					</dd>
					<dd>
						<h5>年代：</h5>
						<ul class="sift-list">
							<li class="cur"><a href="#">全部</a></li>
							<li><a href="#">2022</a></li>
							<li><a href="#">2021</a></li>
							<li><a href="#">2020</a></li>
							<li><a href="#">2019</a></li>
							<li><a href="#">2018</a></li>
							<li><a href="#">2017</a></li>
							<li><a href="#">2016</a></li>
							<li><a href="#">2015</a></li>
							<li><a href="#">2014</a></li>
							<li><a href="#">2013</a></li>
							<li><a href="#">2012</a></li>
							<li><a href="#">更早</a></li>
						</ul>
					</dd>
				</dl>
			</form>
		</div>
		<div class="product-lay">
			<div class="product-list">
				<form action="" method="get">
					<dl class="order">
						<dt>排序：</dt>
						<dd>
							<div class="check">
								<input type="checkbox" id="hot" class="checkbtn checkno" checked>
								<span class="frame"></span>
								<span class="selected"></span>
							</div>
							<label for="hot">热门</label>
						</dd>
						<dd>
							<div class="check">
								<input type="checkbox" id="date" class="checkbtn checkno">
								<span class="frame"></span>
								<span class="selected"></span>
							</div>
							<label for="date">时间</label>
						</dd>
						<dd>
							<div class="check">
								<input type="checkbox" id="app" class="checkbtn checkno">
								<span class="frame"></span>
								<span class="selected"></span>
							</div>
							<label for="app">评价</label>
						</dd>
					</dl>
				</form>
				<ul class="product-content">
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
					<li class="flex-col-4">
						<a href="product.html" class="product-item">
							<div class="poster">
								<img src="img/电影封面/海贼王：红发歌姬.jpg" alt="海贼王：红发歌姬" title="海贼王：红发歌姬" />
								<div class="product-info">
									<div>海贼王：红发歌姬</div>
									<div>类型：<em>动画</em></div>
									<div>上映时间：<em>2022-12-31</em></div>
									<div>上映地区：<em>日本</em></div>
								</div>
							</div>
							<div class="product-name">海贼王：红发歌姬</div>
						</a>
					</li>
				</ul>
				<!-- 分页按钮模块 -->
				<div id="page" class="flex-col-24">
					<a href="#" class="page-link page-navhome" title="首页">首页</a>
					<a href="#" class="page-link page-previous" title="上一页"><i class="iconfont icon-xiangzuo"></i></a>
					<a href="#" class="page-link page-num page-current" title="第1页">1</a>
					<a href="#" class="page-link page-num" title="第2页">2</a>
					<a href="#" class="page-link page-num" title="第3页">3</a>
					<a href="#" class="page-link page-num" title="第4页">4</a>
					<a href="#" class="page-link page-num" title="第5页">5</a>
					<span class="page-link" style="pointer-events: none;">...</span>
					<a href="#" class="page-link page-num page-last" title="第99页">99</a>
					<a href="#" class="page-link page-next" title="下一页"><i class="iconfont icon-xiangyou1"></i></a>
					<a href="#" class="page-link page-navlast" title="尾页">尾页</a>
				</div>
			</div>
		</div>
	</main>
	<!-- 底部 -->
	<footer>
		<div id="footer-bg" class="footer-bg-black">
			<div class="footer-layout">
				<!-- 底部上盒子 -->
				<div class="footer-top-box">
					<!-- 列表链接模块 -->
					<div class="links-list-box flex-col-24">
						<!-- 第一个列表 -->
						<ul class="flex-col-6 links-list_Member">
							<li class="footer-link-item"><a href="#">会员礼品卡</a></li>
							<li class="footer-link-item"><a href="#">企业团购</a></li>
							<li class="footer-link-item"><a href="#">注册侠客会员</a></li>
						</ul>
						<!-- 第二个列表 -->
						<ul class="flex-col-6 links-list_Help">
							<li class="footer-link-header"><span>获得帮助</span><i
									class="iconfont icon-xiangxia2 footer_drop-down-btn"></i></li>
							<ul class="footer_drop-down-menu">
								<li class="footer-link"><a href=" #">订单状态</a></li>
								<li class="footer-link"><a href=" #">退票改签</a></li>
								<li class="footer-link"><a href="#">付款选项</a></li>
								<li class="footer-link"><a href="#">账号异常</a></li>
								<li class="footer-link"><a href="#">联系我们</a></li>
							</ul>
						</ul>
						<!-- 第三个列表 -->
						<ul class="flex-col-6 links-list_About">
							<li class="footer-link-header"><span>关于侠客</span><i
									class="iconfont icon-xiangxia2 footer_drop-down-btn"></i></li>
							<ul class="footer_drop-down-menu">
								<li class="footer-link"><a href="newsList.html">新闻咨讯</a></li>
								<li class="footer-link"><a href="#">制作团队</a></li>
								<li class="footer-link"><a href="#">招贤纳士</a></li>
							</ul>
						</ul>
						<!-- 图标链接模块 -->
						<div class="icon-ser-box">
							<button class="btn-weixin" title="官方微信"><i class="iconfont icon-weixin"></i></button>
							<a href="#" class="btn-weibo" title="官方微博"><i class="iconfont icon-weibo"></i></a>
							<a href="#" class="btn-mail" title="官方邮箱"><i class="iconfont icon-tousujianyi"></i></a>
							<a href="https://github.com" class="btn-github" title="https://github.com"><i
									class="iconfont icon-github"></i></a>
						</div>
					</div>
				</div>
				<!-- 底部下盒子 -->
				<div class="footer-bottom-box flex-row">
					<!-- 版权模块 -->
					<div class="footer-bottom-left-copyright flex-col-12">
						<div class="city-pos">
							<i class="iconfont icon-weizhi"></i>
							<span>清远市</span>
						</div>
						<div class="copyright">
							<p><i class="iconfont icon-banquan"></i>&nbsp;2022&nbsp;xiake.com,&nbsp;保留所有权利</p>
						</div>
					</div>
					<!-- 机关模块 -->
					<ul class="footer-bottom-right-menu flex-row flex-col-12">
						<li><a href="#">用户协议</a></li>
						<li><a href="#">使用条款</a></li>
						<li><a href="#">销售条款</a></li>
						<li><a href="#">隐私政策</a></li>
						<li><a href="#">投诉反馈</a></li>
						<li><a href="#">粤ICP备2021011111号-20</a></li>
						<li class="derivation"><i class="iconfont icon-jurassic_school"></i><a
								href="https://www.nhic.edu.cn/" target="_blank">南华工商学院</a></li>
					</ul>
				</div>
			</div>
		</div>
	</footer>
	<!-- 右侧固定图标列表 -->
	<div id="fixedGroup-icon" class="fixedGroup-blackBG">
		<ul>
			<li class="theme-switch-btn">
				<i class="iconfont icon-baitian-qing light-app">
					<span>切换浅色外观<i class="iconfont icon-bofang"></i></span>
				</i>
				<i class="iconfont icon-yueliang dark-app">
					<span>切换深色外观<i class="iconfont icon-bofang"></i></span>
				</i>
			</li>
			<li class="message">
				<a href="message.html" class="iconfont icon-xiaoxi">
					<span>留言墙<i class="iconfont icon-bofang"></i></span>
				</a>
			</li>
			<li id="returnTop" style="display: none;">
				<div class="iconfont icon-huidaodingbu">
					<span>返回顶部<i class="iconfont icon-bofang"></i></span>
				</div>
			</li>
		</ul>
	</div>
</body>
<script src="js/theme—switch.js"></script>
<script src="js/head-footer.js"></script>
<script>
	// 筛选
	$(".sift-list > li").click(function () {
		$(this).addClass("cur").siblings().removeClass("cur");
	})
</script>

</html>